<template>
    <div class="application-container">
    <h2 class="section-title">申请加分</h2>
      <el-button type="primary" @click="showResearchDialog">科研加分申请</el-button>
      <el-button type="success" @click="showServiceDialog">服务加分申请</el-button>
  
      <div class="applied-projects">
        <h3>已申请项目</h3>
        <el-table :data="appliedProjects" style="width: 100%">
            <el-table-column prop="studentId" label="学号" width="120"></el-table-column>
          <el-table-column prop="bProject" label="项目名称" width="120"></el-table-column>
          <el-table-column prop="bPoints" label="项目分数" width="200"></el-table-column>
          <el-table-column prop="isTran" label="是否提交材料" width="180"></el-table-column>
          <el-table-column prop="creatTime" label="申请日期" width="180"></el-table-column>
          <el-table-column prop="status" label="申请状态">
            <template slot-scope="scope">
              <el-steps :space="100" :active="getActiveStep(scope.row.status)" :finish-status="getFinishStatus(scope.row.status)">
                <el-step title="提交申请"></el-step>
                <el-step title="审核中"></el-step>
                <el-step title="审核结果"></el-step>
              </el-steps>
            </template>
          </el-table-column>
          
          <el-table-column width="180">
            <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" circle @click="delProject(scope.row.studentId,scope.row.creatTime)"></el-button>
            </template>
            </el-table-column>

        </el-table>
      </div>
  
      <el-dialog title="科研加分申请" :visible.sync="researchDialogVisible" width="50%">
    <!-- 个人信息 -->
    <div>
      <p>个人信息：姓名 {{ student.name }} 学号：{{ student.studentId }}</p>
    </div>

    <!-- 选择项目 -->
    <el-form :model="researchForm" @submit.native.prevent="handleSubmit">
        <el-form-item label="选择项目">
      <el-select v-model="researchForm.bProject" placeholder="请选择项目" @change="handleProjectChange">
        <el-option
          v-for="project in projectsList"
          :key="project.lable"
          :label="project.lable"
          :value="project.lable"
        ></el-option>
      </el-select>
    </el-form-item>

    <!-- 项目分数 -->
    <el-form-item label="项目分数">
      <el-input v-model="researchForm.bPoints" disabled></el-input>
    </el-form-item>

      <!-- 提交材料 -->
      <el-form-item>
        <el-radio v-model="researchForm.isTran" label="已提交">已提交材料</el-radio>
        <el-radio v-model="researchForm.isTran" label="未提交">未提交材料</el-radio>
      </el-form-item>

      <!-- 提交和取消按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitResearchApplication">提交</el-button>
        <el-button @click="researchDialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>


  <el-dialog title="服务加分申请" :visible.sync="serviceDialogVisible" width="50%">
    <!-- 个人信息 -->
    <div>
      <p>个人信息：姓名 {{ student.name }} 学号：{{ student.studentId }}</p>
    </div>

    <!-- 选择项目 -->
    <el-form :model="serviceForm" @submit.native.prevent="handleSubmit">
        <el-form-item label="选择项目">
      <el-select v-model="serviceForm.bProject" placeholder="请选择项目" @change="handleServiceChange">
        <el-option
          v-for="service in serviceList"
          :key="service.lable"
          :label="service.lable"
          :value="service.lable"
        ></el-option>
      </el-select>
    </el-form-item>

    <!-- 项目分数 -->
    <el-form-item label="项目分数">
      <el-input v-model="serviceForm.bPoints" disabled></el-input>
    </el-form-item>

      <!-- 提交材料 -->
      <el-form-item>
        <el-radio v-model="serviceForm.isTran" label="已提交">已提交材料</el-radio>
        <el-radio v-model="serviceForm.isTran" label="未提交">未提交材料</el-radio>
      </el-form-item>

      <!-- 提交和取消按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitServiceApplication">提交</el-button>
        <el-button @click="serviceDialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  
  
    </div>
  </template>
  
  <script>
import request from '../../utils/request';

  export default {
    created(){
        this.load()
    },
    data() {
      return {
        researchDialogVisible: false,
        serviceDialogVisible: false,
        appliedProjects:[],
        biaozhi:'',
        appliedProjects: [],      // 用于存储已申请项目的数组
        projectsList : [],  //用于存放后台拿到的表单数据
        serviceList: [],
        student:{
            "studentId":'22222',
            "name": "赵岳山",
        }, 
        researchForm: {
          bProject:'',
          bPoints:'',
          isTran:''
        },
        serviceForm: {
            bProject:'',
            bPoints:'',
            isTran:''
        }
      };
    },
    methods: {
      showResearchDialog() {
        this.researchDialogVisible = true;
      },
      showServiceDialog() {
        this.serviceDialogVisible = true;
      },
      submitResearchApplication() {
        this.researchForm.type = 0
        request.post("/bonus/save",this.researchForm).then(res =>{
            if(res.data.code === 0){
                this.$message({
                    message: res.data.msg,
                    type: 'success'
            })
            this.load()
            }else{
                this.$message.error({
            
                 message: res.data.msg,
            
           })
            }
        })
        this.clearForm();
      },
      submitServiceApplication() {
        this.serviceForm.type = 1
        request.post("/bonus/save",this.serviceForm).then(res =>{
            if(res.data.code === 0){
                this.$message({
                    message: res.data.msg,
                    type: 'success'
            })
            this.load()
            }else{
                this.$message.error({
            
                 message: res.data.msg,
            
           })
            }
        })
        this.clearForm();
      },
      getActiveStep(status) {
        switch (status) {
          case '待审核':
            return 1;
          case '审核中':
            return 2;
          case '审核通过':
            return 3;
         case '未通过':
            return 3;
          default:
            return 1;
        }
      },
      getFinishStatus(status){
        switch (status) {
      case '待审核':
        return 'success';
      case '审核中':
        return 'success';
      case '审核通过':
        return 'success';
      case '未通过':
        return 'error';
      default:
        return 'wait'; 
      }},
      handleProjectChange(value) {
      const selectedProject = this.projectsList.find(project => project.lable === value);
      if (selectedProject) {
        this.researchForm.bPoints = selectedProject.value;
      } else {
        this.researchForm.bPoints = '';
      }
    },
    handleServiceChange(value){
        const selectedProject = this.serviceList.find(service => service.lable === value);
      if (selectedProject) {
        this.serviceForm.bPoints = selectedProject.value;
      } else {
        this.serviceForm.bPoints = '';
      }
    },
    load(){
        request.get("/rules/message").then(res =>{
            if(res.data.code === 401){
                this.$message.error({
                message: res.data.msg,
             })
             this.$router.push("/slogin")
            }else{
                this.student = res.data.student
            const criteria = JSON.parse(res.data.rule.criteria)
            this.projectsList = criteria.creat
            this.serviceList =  criteria.fujia
            this.appliedProjects = res.data.list
            }
            
            
            console.log(this.projectsList)
        })
    },
    delProject(studentId,creatTime){
        console.log(studentId)
        const data = {
        studentId: studentId,
        creatTime: creatTime
    };
        request.post("/bonus/del",data).then(res =>{
            if(res.data.code=== 0){
                
                this.$message({
                    message: res.data.msg,
                    type: 'success'
            })
            this.load()
            }else{
                this.$message.error({
            
                 message: res.data.msg,
            
           })
            }
        })
    }
    }
  };
  </script>
  
  <style scoped>
  .application-container {
    padding: 20px;
  }
  .section-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #409eff;
}
  .application-container h2 {
    margin-bottom: 20px;
  }
  
  .application-container .el-button {
    margin-right: 10px;
  }
  
  .applied-projects {
    margin-top: 30px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
  
  .applied-projects h3 {
    margin-bottom: 20px;
    color: #409eff;
    font-size: 18px;
  }
  </style>